import ProTable from '@ant-design/pro-table';
import type { ProColumns } from '@ant-design/pro-table';
import ProForm,{ ProFormText,ProFormTextArea, ProFormRadio, ProFormDatePicker, ProFormCheckbox, ProFormSelect } from '@ant-design/pro-form';
import { Upload, Modal,message,Form ,Cascader,Button,Popconfirm} from 'antd';
import React, { PureComponent } from 'react';
import { Tabs } from 'antd';
const { TabPane } = Tabs;
import {RecvAddress} from  '../../model'
import AddressDialog from './AddressDialog';
import request from '@/utils/request';
import { PlusOutlined } from '@ant-design/icons';
const { confirm } = Modal;

class MyDealerInfo extends PureComponent<any,any>{

  static propTypes:{
    finishCallback:any;
    admin?:boolean;
    dealerId?:string;
    initTab?:"";
    state?:boolean;
  }

  formRef:any = React.createRef();
  formRef2:any = React.createRef();
  access = sessionStorage.getItem('access') as string;
  constructor(props:any) {
    super(props)

  }

  async areaTwo() {
    var data =  request('/xwyl/cm/region/getChinaData',{
    });
    var val =await data;
    this.setState({areas:val.data});
  }

  async areaThree() {
    var data =  request('/xwyl/cm/region/getChinaData?isShowAera=1',{
    });
    var val =await data;
    this.setState({areaThree:val.data});
  }

  async  dealerDataById(dealerId:string) {
    var params = {"dealerId":dealerId}
    var val = await request('/xwyl/dealer/dealerDataById', {params});
    if(val.errorCode==="200"){
      var areaList:any = []
      if(val.data.dealer.business_area){
        areaList = val.data.dealer.business_area.split(',').map((item:any)=>{return {area:item}})
      }
      this.setState({business_area:areaList,recvList:val.data?.recvList,data:val.data,longFlag:val.data.qualification?val.data.qualification.isLongTerm==='1':false,longFlag2:val.data.qualification?val.data.qualification.recordLongTerm==='1':false});
      var dealer=val.data.dealer;
      if(!val.data.qualification){
        val.data.qualification={};
      }
      val.data.dealer.areas=[val.data.dealer.provinces,val.data.dealer.city];

      var startDate = val.data.qualification?.fare_term_start;
      var endDate = val.data.qualification?.fare_term_end;
      if(startDate===''){
        startDate=undefined;
      }
      if(endDate===''){
        endDate=undefined;
      }
      val.data.qualification.fare_term_start_time= startDate;
      val.data.qualification.fare_term_end_time= endDate;
      // val.data.qualification.isLongTerm = val.data.qualification?.isLongTerm;
      startDate = val.data.qualification?.permission_start;
      endDate = val.data.qualification?.permission_end;
      if(startDate===''){
        startDate=undefined;
      }
      if(endDate===''){
        endDate=undefined;
      }
      val.data.qualification.permission_start_time=startDate;
      val.data.qualification.permission_end_time=endDate;
      startDate = val.data.qualification?.record_start;
      endDate = val.data.qualification?.record_end;
      if(startDate===''){
        startDate=undefined;
      }
      if(endDate===''){
        endDate=undefined;
      }
      val.data.qualification.record_start_time=startDate;
      val.data.qualification.record_end_time=endDate;
      if(val.data.ticket){
        val.data.ticket.areas=[val.data.ticket.provinces,val.data.ticket.city,val.data.ticket.area]
      }
      this.formRef.current?.setFieldsValue(dealer);
    }else{
      message.error("获取经销商信息失败！");
    }
  }

  async getFileList(id:string,key:string){
    var param:any={"shipId":key+id};
    var data =  request('/xwyl/attachment/attachListData',{
      method: 'POST',
      requestType:'form',
      data: {
        ...param,
      },
    });
    var val =await data;
    if(val.errorCode="200"){
      val.data.forEach((element:any) => {
        element.uid=element.id;
        element.name=element.attName;
        element.url=element.attPath;
        element.status='done';
      });
      if(key==='yyzz'){
        this.setState({yyzzList:val.data});
      }else  if(key==='lxkz'){
        this.setState({lxkzList:val.data});
      }
      else  if(key==='eljyba'){
        this.setState({eljybaList:val.data});
      }else  if(key==='kpxx'){
        this.setState({kpxxList:val.data});
      }else  if(key==='frwt'){
        this.setState({frwtList:val.data});
      }
      else{
        this.setState({khxkzList:val.data});
      }
    }
  }

  deleteRecv(params:any){
    return request('/xwyl/dealer/deleteRecv', {
      method: 'POST',
      requestType:'form',
      data: {
        ...params,
        method: 'post',
      },
    });
  }

  updateDealer(params:any){
    return request('/xwyl/dealer/updateDealer', {
      method: 'POST',
      requestType:'form',
      data: {
        ...params,
        method: 'post',
      },
    });
  }

  saveTicket(params:any){
    return request('/xwyl/dealer/saveTicket', {
      method: 'POST',
      requestType:'form',
      data: {
        ...params,
        method: 'post',
      },
    });
  }

  saveQualification(params:any){
    return request('/xwyl/dealer/saveQualification', {
      method: 'POST',
      requestType:'form',
      data: {
        ...params,
        method: 'post',
      },
    });
  }

  state = {
    previewVisible: false,
    previewImage: '',
    previewTitle: '',
    fullArea:'',
    areas:[],
    areaThree:[],
    currentArea:{},
    addressModal:false,
    recvList:[],
    data:{},
    actionKey:'1',
    yyzzList: [],
    lxkzList: [],
    eljybaList:[],
    khxkzList: [],
    kpxxList:[],
    frwtList:[],
    stateFlag:true,
    longFlag:false,
    longFlag2:false,
    business_area:[],
    fullData:''
  };

  setStateFlag=(flag:boolean)=>{
    this.setState({stateFlag:flag})
  }

  componentDidMount(){
    // this.areaTwo();
    // this.areaThree();
    // if(!this.props.admin){
    //   var dealerId = sessionStorage.getItem('dealerId')as string;;
    //   // this.dealerDataById(dealerId);
    //   // this.getFileList(dealerId,'yyzz');
    //   // this.getFileList(dealerId,'lxkz');
    //   // this.getFileList(dealerId,'khxkz');
    //   this.showDealer(dealerId);
    // }else{
    //   // this.onRef=React.createRef();
    //   // this.props.onRef(this)
    //   console.log(this.props)
    //   this.showDealer(this.props.dealerId);
    // }
    // if(this.props.initTab){
    //   this.setState({actionKey:this.props.initTab})
    // }
  }


  showDealer=(dealerId:string)=>{
    this.dealerDataById(dealerId);
    this.getFileList(dealerId,'yyzz');
    this.getFileList(dealerId,'lxkz');
    this.getFileList(dealerId,'eljyba')
    this.getFileList(dealerId,'khxkz');
    this.getFileList(dealerId,'kpxx');
    this.getFileList(dealerId,'frwt');
  }
  
  b_columns:ProColumns[] = [
    {
      title:'业务区域',
      dataIndex: 'area',
      ellipsis:true,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 80,
      render: (text, record:any, _, action) => this.access==='sale'?[]:[
      <Popconfirm title="确定删除该地区吗?" key="delete_area" onConfirm={() => {
        var list = this.state.business_area.filter((item:any)=>item.area!=record.area)
        this.setState({business_area:list})
      }}>
        <a>删除</a>
      </Popconfirm>
      ]
    },
  ]

  //表头信息以及表值设置
   columns: ProColumns[] = [
    {
      title:'联系人',
      dataIndex: 'recv_consignee',
    },
    {
      title:"电话",
      dataIndex: 'recv_phone',
    },
    {
      title:"是否默认",
      dataIndex: 'recv_default',
      renderText:(val)=>{
        return val==='1'?'是':'否';
      }
    },
    {
      title:"邮编",
      dataIndex: 'recv_postcode',
    },
    {
      title:"地址",
      width:200,
      ellipsis:true,
      dataIndex: 'recv_address',
      renderText:(_,record)=>{
        return `${record.provinces_label}${record.city_label}${record.area_label}${record.recv_address}`
      }
    },
    {
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (text, record, _, action) => this.access==='sale'?[]:[
        <a
          key="editable"
          onClick={() => {
            record.areas=[record.provinces,record.city,record.area];
            this.setState({currentArea:record});
            this.setState({addressModal:true});
          }}
        >
          编辑
        </a>,
      <Popconfirm title="确定删除该地址吗?" key="delete" onConfirm={() => this.handleDelete(record.recv_id)}>
        <a>删除</a>
      </Popconfirm>
      ]
    },
  ];

  handleDelete=async (id:any)=>{
    var val=await this.deleteRecv({'recv_id':id});
    if(val.errorCode==='200'){
      message.success('删除成功');
      let index = this.state.recvList.findIndex((item:any)=>{
        return item.recv_id===id;
      })
      this.state.recvList.splice(index,1);
      var newArray=[...this.state.recvList];
      console.log(newArray,val);
      this.setState({recvList:newArray});
    }else{
      message.error('删除失败');
    }
  }

  handlePreview = async (file:any) => {
    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
      previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
    });
  };

  handleCancel = () => this.setState({ previewVisible: false });

  onChange=(val:any,label:any)=>{
    console.log(val,label)
    if(label.length==2){
      const fullData = `${label[0].label}/${label[1].label}`;
      this.setState({fullData});
    }else{
      this.setState({fullData:''});
    }
    // if(label.length>1){
    //   const fullData = `${label[0].label}/${label[1].label}`;
    //   this.setState({fullData});
    // }else{
    //   const fullData = `${label[0].label}`;
    //   // setFullArea(fullData);
    // }
  }

  addressFinish=(data:any)=>{
    if(data.recv_default==='1'){
      this.state.recvList.forEach((item:any)=>{
        if(item.recv_default==='1'){
          item.recv_default='0';
        }
      })
    }
    let flag=false;
    var list = this.state.recvList.map((item:any)=>{
      if(item.recv_id===data.recv_id){
        flag=true;
        return data;
      }
      return item;
    })
    if(!flag){
      list.push(data);
    }
    this.setState({recvList:list});
  }

  uploadProps = {
    name: 'file',
    accept:'image/*',
    action: '/xwyl/attachment/uploadAttach',
    headers: {
      authorization: 'authorization-text',
    },
    beforeUpload:(file: any, FileList: any[])=>{
      var flag =  file.type.indexOf('image/')>=0;
      if(!flag){
         message.error('请上传图片格式或pdf格式')
      }
      return flag;
    }
  };

  render() {
    const { previewVisible, previewImage, yyzzList,lxkzList,khxkzList,kpxxList,eljybaList, frwtList,previewTitle} = this.state;
    const uploadButton = (
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>点击上传</div>
      </div>
    );
    return (
      <>
      <Tabs defaultActiveKey="1" onTabClick={(activeKey:string)=>{
        if(this.state.stateFlag){
          this.setState({actionKey:activeKey})
        }
      }} activeKey={this.state.actionKey} centered style={{backgroundColor:'#fff',padding:'0 20px 20px 20px'}}>
      <TabPane tab="基本信息" key="1" >
        <ProForm
           style={{marginTop:16}}
          submitter={this.access==='sale'?false:{
            searchConfig: {
              submitText: this.props.admin?'保存':'下一步'
            },
            render: (props, defaultDoms) => {
              return [defaultDoms[1],<span style={{color:'#f10000'}}>以上如有信息更新，请代理商伙伴及时登录系统自行更新</span>];
            }
          }}
          formRef={this.formRef}
          // initialValues={this.state.data?.dealer}
          onFinish={async (values) => {
              values.id = this.state.data.dealer?.id;
              values.provinces = values.areas[0]
              if(values.areas.length==2){
                values.city = values.areas[1]
              }
          
              var jsonArea = this.state.business_area.map((item:any)=>item.area).join(',')
              if(!this.props.admin){
                  if(!jsonArea){
                    message.warning('请填写业务区域');
                    return false
                  }
              }
              values.business_area = jsonArea
              var val = await this.updateDealer(values);
              if(val.errorCode==='200'){
                this.setState({actionKey:'2'});
                message.success('更新成功');
              }else{
                message.error('更新失败');
              }
              console.log(val);
          }}>
        
            <ProForm.Group>
              <ProFormText  name="cnName" label="签约经销商名称(中文)" rules={[{ required: true}]} disabled={!this.props.admin}  allowClear={false} width="md"/>
              <Button style={{marginTop:5}} type='primary' >工商查询</Button>
              <ProFormText  name="enName" label="关联经销商名称" allowClear={false} hidden={!this.props.admin}  width="md"/>
           </ProForm.Group>

           <ProForm.Group>
            <ProFormText  name="mail" label="开户邮箱" rules={[{ required:true},{pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,message: '邮箱格式不正确',}]}  width="lg" allowClear={false}/>
           </ProForm.Group>

          
           <ProForm.Group>
              <ProFormText  name="legal_person" label="法定代表人" rules={[{ required: !this.props.admin}]} width="sm" allowClear={false}/>
              <ProFormText  name="manager_person" label="企业负责人" rules={[{ required: !this.props.admin}]}  width="sm" allowClear={false}/>
              {/* <ProFormText  name="quality_person" label="质量负责人"  width="sm" allowClear={false}/> */}
           </ProForm.Group>

           <ProFormText  name="office_address" label="实际办公地址" rules={[{ required: !this.props.admin}]} width={700}  allowClear={false}/>
           <ProFormText  name="warehouse_address" label="实际仓库地址" rules={[{ required: !this.props.admin}]} width={700}  allowClear={false}/>
           <ProForm.Group>
           <Form.Item
                name="areas"
                label="注册地区"
                rules={[
                  {
                    required: !this.props.admin
                  },
                ]} 
              >
                <Cascader
                  options={this.state.areas}
                  placeholder="请选择"
                  onChange={this.onChange}
              />
            </Form.Item>
              <ProFormText  name="registered_address" label="注册详细地址" allowClear={false} width={600} rules={[{ required: !this.props.admin}]}/>
            </ProForm.Group>
           <ProForm.Group>
              <ProFormText  name="registered_phone" label="注册电话" rules={[{ required: !this.props.admin}]}  width="sm" allowClear={false}/>
              <ProFormText  name="office_postcode" label="办公室邮编" rules={[{ required: !this.props.admin}]}  width="sm" allowClear={false}/>
              <ProFormText  name="office_phone" label="办公电话" rules={[{ required: !this.props.admin}]}  width="sm" allowClear={false}/>
           </ProForm.Group>  
           </ProForm>     
      </TabPane>
      <TabPane tab="联系人信息" key="2">
        <ProForm 
          style={{marginTop:16}}
          submitter={this.access==='sale'?false:{
            searchConfig: {
              submitText: this.props.admin?'保存':'下一步'
            },
            render: (props, defaultDoms) => {
              return [<Button type='primary' key='2' onClick={()=>this.setState({actionKey:'1'})}>上一步</Button>,defaultDoms[1],<span style={{color:'#f10000'}}>以上如有信息更新，请代理商伙伴及时登录系统自行更新</span>];
            }
          }}
          initialValues={this.state.data?.dealer}
          onFinish={async (values) => {
            values.id = this.state.data.dealer?.id;
            var val = await this.updateDealer(values);
            if(val.errorCode==='200'){
              message.success('更新成功');
              this.setState({actionKey:'3'});
            }else{
              message.error('更新失败');
            }
          }}
         >
            <ProForm.Group >
                <ProFormText  name="primary_contact" label="实际销售业务主要负责人" rules={[{ required: !this.props.admin}]}  width="sm" allowClear={false}/>
                <ProFormText  name="primary_phone" label="电话" rules={[{ required: !this.props.admin}]} width="sm" allowClear={false}/>
                <ProFormText  name="primary_mail" label="邮箱" rules={[{ required: !this.props.admin}, {pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,message: '邮箱格式不正确'}]} width="sm" allowClear={false}/>
            </ProForm.Group>
            <ProForm.Group>
              <ProFormText  name="businessBoss" label="公司老板" rules={[{ required: !this.props.admin}]}   width="sm" allowClear={false}/>
              <ProFormText  name="bossPhone" label="电话" rules={[{ required: !this.props.admin}]}   width="sm" allowClear={false}/>
            <ProFormText  name="bossMail" label="邮箱"  rules={[{ required: !this.props.admin},{pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,message: '邮箱格式不正确',}]}  width="sm" allowClear={false}/>
          </ProForm.Group>
            <ProForm.Group>
              <ProFormText  name="logistics_contact" label="质量联系人" rules={[{ required: !this.props.admin}]}   width="sm" allowClear={false}/>
              <ProFormText  name="logistics_phone" label="电话" rules={[{ required: !this.props.admin}]}   width="sm" allowClear={false}/>
            <ProFormText  name="logistics_mail" label="邮箱"  rules={[{ required: !this.props.admin},{pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,message: '邮箱格式不正确',}]}  width="sm" allowClear={false}/>
          </ProForm.Group>
          <ProForm.Group>
                <ProFormText  name="quality_contact" label="物流联系人" rules={[{ required: !this.props.admin}]}  width="sm" allowClear={false}/>
                <ProFormText  name="quality_phone" label="电话" rules={[{ required: !this.props.admin}]} width="sm" allowClear={false}/>
                <ProFormText  name="quality_mail" label="邮箱" rules={[{ required: !this.props.admin},{pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,message: '邮箱格式不正确',}]}  width="sm" allowClear={false}/>
          </ProForm.Group>
          <ProForm.Group>
                <ProFormText  name="financial_contact" label="财务联系人" rules={[{ required: !this.props.admin}]}  width="sm" allowClear={false}/>
                <ProFormText  name="financial_phone" label="电话" rules={[{ required: !this.props.admin}]}  width="sm" allowClear={false}/>
                <ProFormText  name="financial_mail" label="邮箱" rules={[{ required: !this.props.admin},{pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,message: '邮箱格式不正确',}]}  width="sm" allowClear={false}/>
          </ProForm.Group>
        </ProForm>
      </TabPane>
      <TabPane tab="经销商资质" key="3">
        <ProForm 
        formRef={this.formRef2}
        style={{marginTop:16}}
            submitter={this.access==='sale'?false:{
              searchConfig: {
                submitText: this.props.admin?'保存':'下一步'
              },
              render: (props, defaultDoms) => {
                return [<Button type='primary' key='3' onClick={()=>this.setState({actionKey:'2'})}>上一步</Button>,defaultDoms[1],<span style={{color:'#f10000'}}>以上如有信息更新，请代理商伙伴及时登录系统自行更新</span>];
              }
          }}
            initialValues={this.state.data?.qualification}
            onFinish={async (values) => {
              if(!this.props.admin){
                if(yyzzList.length==0){
                  message.warning('请上传营业执照！');
                  return;
                }
                if(lxkzList.length==0){
                  message.warning('请上传三类医疗器械经营许可证！');
                  return;
                }
                if(eljybaList.length==0){
                  message.warning('请上传二类医疗器械备案！');
                  return;
                }
                
                if(khxkzList.length==0){
                  message.warning('请上传银行开户许可证！');
                  return;
                }
                if(kpxxList.length==0){
                  message.warning('请上传开票信息！');
                  return;
                }
                if(frwtList.length==0){
                  message.warning('请上传采购法人授权委托书！');
                  return;
                }
                
              }
              values.dealerId = this.state.data.dealer?.id;
              // values.fare_term_start_time = values.fare_term_start;
              // values.fare_term_end_time = values.fare_term_end;
              // values.permission_start_time = values.permission_start;
              // values.permission_end_time = values.permission_end;
              // values.record_start_time = values.record_start;
              // values.record_end_time = values.record_end;
              console.log(values)
              var val = await this.saveQualification(values);
              if(val.errorCode==='200'){
                message.success('更新成功');
                this.setState({actionKey:'4'});
              }else{
                message.error('更新失败');
              }
            }}
          >
            <ProForm.Group>
              <ProFormText  name="business_licenseNo" label="营业执照号" rules={[{ required: !this.props.admin}]}  width="sm" allowClear={false}/>
              <ProFormDatePicker width="sm" name="fare_term_start_time" label="营业执照有效期开始日期"  rules={[{ required: !this.props.admin}]}/>
              <ProFormDatePicker width="sm" name="fare_term_end_time" label="营业执照有效期结束日期" rules={[{ required: !this.state.longFlag}]} disabled={this.state.longFlag}/>
           </ProForm.Group>
           <ProForm.Group>
            <ProFormSelect width="sm" name="isLongTerm" label="营业执照长期有效" rules={[{ required: !this.props.admin}]} allowClear={false} options={[{label:'是',value:"1"},{label:'否',value:"0"}]} fieldProps={{onSelect:(v)=>{
             if(v==='1'){
               this.formRef2.current?.setFieldsValue({fare_term_end_time:undefined});
             }
             this.setState({longFlag:v==='1'})}}} />
            <ProFormText  name="econ_kind" label="企业类型" rules={[{ required: !this.props.admin}]} width="sm" allowClear={false}/>
           </ProForm.Group>
           <div style={{width:'900px'}} >
            <ProFormTextArea name="fare_scope" label="营业执照经营范围" rules={[{ required: !this.props.admin}]} placeholder="" fieldProps={{showCount:true,maxLength:500}} allowClear={false} />
            </div>
           <ProForm.Group>
              <ProFormText  name="license_number" label="三类医疗器械经营许可证号" rules={[{ required: !this.props.admin}]}  width="lg" allowClear={false}/>
              <ProFormDatePicker width="sm" name="permission_start_time" rules={[{ required: !this.props.admin}]}  label="经营许可有效期开始日期" />
              <ProFormDatePicker width="sm" name="permission_end_time" rules={[{ required: !this.props.admin}]} label="经营许可有效期结束日期" />
          </ProForm.Group>
          <div style={{width:'900px'}} >
            <ProFormTextArea name="licence_fare_scope" label="经营许可证经营范围" rules={[{ required: !this.props.admin}]} placeholder="" fieldProps={{showCount:true,maxLength:500}} allowClear={false} />
            </div>
            <ProForm.Group>
                <ProFormText  name="warehouse_address2" label="经营许可证上经营场所" rules={[{ required: !this.props.admin}]}  width={600} allowClear={false}/>
          </ProForm.Group>
          <ProForm.Group>
            <ProFormText  name="warehouse_address" label="经营许可证上库房地址" rules={[{ required: !this.props.admin}]}  width={600} allowClear={false}/>
          </ProForm.Group>
          <ProForm.Group>
                <ProFormText  name="record_number" label="二类医疗器械经营备案凭证号" rules={[{ required: !this.props.admin}]} width="md" allowClear={false}/>
                <ProFormDatePicker width="sm" name="record_start_time" rules={[{ required: !this.props.admin}]} label="经营备案有效期开始日期"  />
                <ProFormDatePicker width="sm" name="record_end_time" label="经营备案有效期结束日期" rules={[{ required: !this.state.longFlag2}]} disabled={this.state.longFlag2}/>
                <ProFormSelect width="sm" name="recordLongTerm" label="二类备案是否长期有效" rules={[{ required: !this.props.admin}]} allowClear={false} options={[{label:'是',value:"1"},{label:'否',value:"0"}]} fieldProps={{onSelect:(v)=>{
                  if(v==='1'){
                    this.formRef2.current?.setFieldsValue({record_end_time:undefined});
                  }
                this.setState({longFlag2:v==='1'})}}} />
          </ProForm.Group>
          <h3><span style={{color:'#ff0000'}}>* </span>营业执照<span style={{color:'#ff0000'}}>(仅支持图片格式,上传的图片一定要清晰，并且加盖红色公章)</span></h3>
          <Upload
            {...this.uploadProps} data={{'shipId':'yyzz'+this.state.data?.dealer?.id,'userId':sessionStorage.getItem("userId")}} headers={{
            'authorization':`${sessionStorage.getItem('token')}`}} 
            listType="picture-card"
            fileList={yyzzList}
            onPreview={this.handlePreview}
            onRemove={(record)=>{
              confirm({
                content: "确定删除吗？",
                onOk:async()=> {
                    var req = request('/xwyl/attachment/deleteAtt', {
                    method: 'POST',
                    requestType:'form',
                    data: {
                      ...{"id":record.uid},
                      method: 'post',
                    },
                  });
                  var val =await req;
                  if(val.errorCode==='200'){
                    var newList=yyzzList.filter((item:any)=>{
                      return item.uid!=record.uid;
                    });
                    this.setState({yyzzList:newList});
                  }else{
                    message.error("删除失败");
                  }
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }}
            onChange={(info:any)=>{
              if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList);
              }
              if (info.file.status === 'done') {
                if(info.file.response.errorCode==="200"){
                  message.success(`${info.file.name}上传成功`);
                  var data = info.file.response.data;
                  data.uid = data.attId;
                  data.name = info.file.name;
                  data.url = data.location;
                  data.status ='done';  
                  yyzzList.push(data);
                  this.setState({yyzzList:[...yyzzList]});
                }else{
                  message.error(`${info.file.name} 上传失败.`);
                }
              } else if (info.file.status === 'error') {
                message.error(`${info.file.name} 上传失败.`);
              }
            }}
          >
              {uploadButton}
          </Upload>
          <h3><span style={{color:'#ff0000'}}>* </span>三类医疗器械经营许可证<span style={{color:'#ff0000'}}>(仅支持图片格式,上传的图片一定要清晰，并且加盖红色公章)</span></h3>
          <Upload
            {...this.uploadProps} data={{'shipId':'lxkz'+this.state.data?.dealer?.id,'userId':sessionStorage.getItem("userId")}} headers={{
            'authorization':`${sessionStorage.getItem('token')}`}} 
            listType="picture-card"
            fileList={lxkzList}
            onPreview={this.handlePreview}
            onRemove={(record)=>{
              confirm({
                content: "确定删除吗？",
                onOk:async()=> {
                  var req = request('/xwyl/attachment/deleteAtt', {
                    method: 'POST',
                    requestType:'form',
                    data: {
                      ...{"id":record.uid},
                      method: 'post',
                    },
                  });
                  var val =await req;
                  if(val.errorCode==='200'){
                    var newList=lxkzList.filter((item:any)=>{
                      return item.uid!=record.uid;
                    });
                    this.setState({lxkzList:newList});
                  }else{
                    message.error("删除失败");
                  }
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }}
            onChange={(info:any)=>{
              if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList);
              }
              if (info.file.status === 'done') {
                if(info.file.response.errorCode==="200"){
                  message.success(`${info.file.name}上传成功`);
                  var data = info.file.response.data;
                  data.uid = data.attId;
                  data.name = info.file.name;
                  data.url = data.location;
                  data.status ='done';
                  lxkzList.push(data);
                  this.setState({lxkzList:[...lxkzList]});
                }else{
                  message.error(`${info.file.name} 上传失败.`);
                }
              } else if (info.file.status === 'error') {
                message.error(`${info.file.name} 上传失败.`);
              }
            }}
          >
              {uploadButton}
          </Upload>
          <h3><span style={{color:'#ff0000'}}>* </span>二类医疗器械经营备案<span style={{color:'#ff0000'}}>(仅支持图片格式,上传的图片一定要清晰，并且加盖红色公章)</span></h3>
          <Upload
            {...this.uploadProps} data={{'shipId':'eljyba'+this.state.data?.dealer?.id,'userId':sessionStorage.getItem("userId")}} headers={{
            'authorization':`${sessionStorage.getItem('token')}`}} 
            listType="picture-card"
            fileList={eljybaList}
            onPreview={this.handlePreview}
            onRemove={(record)=>{
              confirm({
                content: "确定删除吗？",
                onOk:async()=> {
                  var req = request('/xwyl/attachment/deleteAtt', {
                    method: 'POST',
                    requestType:'form',
                    data: {
                      ...{"id":record.uid},
                      method: 'post',
                    },
                  });
                  var val =await req;
                  if(val.errorCode==='200'){
                    var newList=eljybaList.filter((item:any)=>{
                      return item.uid!=record.uid;
                    });
                    this.setState({eljybaList:newList});
                  }else{
                    message.error("删除失败");
                  }
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }}
            onChange={(info:any)=>{
              if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList);
              }
              if (info.file.status === 'done') {
                if(info.file.response.errorCode==="200"){
                  message.success(`${info.file.name}上传成功`);
                  var data = info.file.response.data;
                  data.uid = data.attId;
                  data.name = info.file.name;
                  data.url = data.location;
                  data.status ='done';
                  eljybaList.push(data);
                  this.setState({eljybaList:[...eljybaList]});
                }else{
                  message.error(`${info.file.name} 上传失败.`);
                }
              } else if (info.file.status === 'error') {
                message.error(`${info.file.name} 上传失败.`);
              }
            }}
          >
              {uploadButton}
          </Upload>
          <h3><span style={{color:'#ff0000'}}>* </span>基本存款账户信息<span style={{color:'#ff0000'}}>(仅支持图片格式,上传的图片一定要清晰，并且加盖红色公章)</span></h3>
          <Upload
            {...this.uploadProps} data={{'shipId':'khxkz'+this.state.data?.dealer?.id,'userId':sessionStorage.getItem("userId")}} headers={{
            'authorization':`${sessionStorage.getItem('token')}`}} 
            listType="picture-card"
            fileList={khxkzList}
            onPreview={this.handlePreview}
            onRemove={(record)=>{
              confirm({
                content: "确定删除吗？",
                onOk:async()=> {
                  var req = request('/xwyl/attachment/deleteAtt', {
                    method: 'POST',
                    requestType:'form',
                    data: {
                      ...{"id":record.uid},
                      method: 'post',
                    },
                  });
                  var val =await req;
                  if(val.errorCode==='200'){
                    var newList=khxkzList.filter((item:any)=>{
                      return item.uid!=record.uid;
                    });
                    this.setState({khxkzList:newList});
                  }else{
                    message.error("删除失败");
                  }
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }}
            onChange={(info:any)=>{
              if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList);
              }
              if (info.file.status === 'done') {
                if(info.file.response.errorCode==="200"){
                  message.success(`${info.file.name}上传成功`);
                  var data = info.file.response.data;
                  data.uid = data.attId;
                  data.name = info.file.name;
                  data.url = data.location;
                  data.status ='done';
                  khxkzList.push(data);
                  this.setState({khxkzList:[...khxkzList]});
                }else{
                  message.error(`${info.file.name} 上传失败.`);
                }
              } else if (info.file.status === 'error') {
                message.error(`${info.file.name} 上传失败.`);
              }
            }}
          >
              {uploadButton}
          </Upload>
          <h3><span style={{color:'#ff0000'}}>* </span>开票信息<span style={{color:'#ff0000'}}>(仅支持图片格式,上传的图片一定要清晰，并且加盖红色公章)</span></h3>
          <Upload
            {...this.uploadProps} data={{'shipId':'kpxx'+this.state.data?.dealer?.id,'userId':sessionStorage.getItem("userId")}} headers={{
            'authorization':`${sessionStorage.getItem('token')}`}} 
            listType="picture-card"
            fileList={kpxxList}
            onPreview={this.handlePreview}
            onRemove={(record)=>{
              confirm({
                content: "确定删除吗？",
                onOk:async()=> {
                  var req = request('/xwyl/attachment/deleteAtt', {
                    method: 'POST',
                    requestType:'form',
                    data: {
                      ...{"id":record.uid},
                      method: 'post',
                    },
                  });
                  var val =await req;
                  if(val.errorCode==='200'){
                    var newList=kpxxList.filter((item:any)=>{
                      return item.uid!=record.uid;
                    });
                    this.setState({kpxxList:newList});
                  }else{
                    message.error("删除失败");
                  }
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }}
            onChange={(info:any)=>{
              if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList);
              }
              if (info.file.status === 'done') {
                if(info.file.response.errorCode==="200"){
                  message.success(`${info.file.name}上传成功`);
                  var data = info.file.response.data;
                  data.uid = data.attId;
                  data.name = info.file.name;
                  data.url = data.location;
                  data.status ='done';
                  kpxxList.push(data);
                  this.setState({kpxxList:[...kpxxList]});
                }else{
                  message.error(`${info.file.name} 上传失败.`);
                }
              } else if (info.file.status === 'error') {
                message.error(`${info.file.name} 上传失败.`);
              }
            }}
          >
              {uploadButton}
          </Upload>
          <h3><span style={{color:'#ff0000'}}>* </span>采购法人授权委托书<span style={{color:'#ff0000'}}>(仅支持图片格式,上传的图片一定要清晰，并且加盖红色公章)</span></h3>
          <Upload
            {...this.uploadProps} data={{'shipId':'frwt'+this.state.data?.dealer?.id,'userId':sessionStorage.getItem("userId")}} headers={{
            'authorization':`${sessionStorage.getItem('token')}`}} 
            listType="picture-card"
            fileList={frwtList}
            onPreview={this.handlePreview}
            onRemove={(record)=>{
              confirm({
                content: "确定删除吗？",
                onOk:async()=> {
                  var req = request('/xwyl/attachment/deleteAtt', {
                    method: 'POST',
                    requestType:'form',
                    data: {
                      ...{"id":record.uid},
                      method: 'post',
                    },
                  });
                  var val =await req;
                  if(val.errorCode==='200'){
                    var newList=frwtList.filter((item:any)=>{
                      return item.uid!=record.uid;
                    });
                    this.setState({frwtList:newList});
                  }else{
                    message.error("删除失败");
                  }
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }}
            onChange={(info:any)=>{
              if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList);
              }
              if (info.file.status === 'done') {
                if(info.file.response.errorCode==="200"){
                  message.success(`${info.file.name}上传成功`);
                  var data = info.file.response.data;
                  data.uid = data.attId;
                  data.name = info.file.name;
                  data.url = data.location;
                  data.status ='done';
                  frwtList.push(data);
                  this.setState({frwtList:[...frwtList]});
                }else{
                  message.error(`${info.file.name} 上传失败.`);
                }
              } else if (info.file.status === 'error') {
                message.error(`${info.file.name} 上传失败.`);
              }
            }}
          >
              {uploadButton}
          </Upload>
          <Modal
            width={1000}
            visible={previewVisible}
            title={previewTitle}
            footer={null}
            onCancel={this.handleCancel}
           >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
        </ProForm>
      </TabPane>
      <TabPane tab="收货信息" key="4">
        <ProTable<RecvAddress>
            columns={this.columns}
            toolbar={{settings:[]}}
            dataSource={this.state.recvList}
            rowKey="recv_id"
            pagination={false}
            search={false}
            toolBarRender={() => [
              <Button
                type="primary"
                key="primary"
                hidden = {this.access==='sale'}
                onClick={() => {
                  this.setState({addressModal:true});
                }}
              >
                新增
              </Button>,
            ]}
          >
        </ProTable>
        <Button type='primary' hidden={this.access==='sale'} style={{marginLeft:10,marginTop:20}}  key='4' onClick={()=>this.setState({actionKey:'3'})}>上一步</Button>
        <Button type='primary' hidden={this.access==='sale'} style={{marginLeft:10,marginTop:20}} key='5' onClick={()=>{
          if(this.state.recvList.length==0){
            message.warn("请先添加收货信息");
            return;
          }
          this.setState({actionKey:'5'})
        }}>{this.props.admin?'保存':'下一步'}</Button><span style={{color:'#f10000'}}>以上如有信息更新，请代理商伙伴及时登录系统自行更新</span>
      </TabPane>
      <TabPane tab="开票信息" key="5">
        <ProForm 
            style={{marginTop:16}}
            submitter={this.access==='sale'?false:{
              searchConfig: {
                submitText: '保存',
              },
              render: (props, defaultDoms) => {
                return [<Button type='primary' key='6' onClick={()=>this.setState({actionKey:'4'})}>上一步</Button>,defaultDoms[1],<span style={{color:'#f10000'}}>以上如有信息更新，请代理商伙伴及时登录系统自行更新</span>];
              }
          }}
            initialValues={this.state.data?.ticket}
            onFinish={async (values) => {
              values.dealerId=this.state.data.dealer?.id;
              values.provinces=values.areas[0]
              values.city=values.areas[1]
              values.area=values.areas[2]
              var val = await this.saveTicket(values);
              if(val.errorCode==='200'){
                message.success('提交成功');
                if(this.props.finishCallback){
                  this.props.finishCallback();
                }
              }else{
                message.error(val.errorMessage);
              }
            }}
        >
            <ProForm.Group >
              <ProFormText  name="account_name" label="开户名称" rules={[{ required: !this.props.admin}]} allowClear={false}   width="md"/>
              <ProFormText  name="duty_paragraph" label="税号" rules={[{ required: !this.props.admin}]}  allowClear={false}  width="md"/>
           </ProForm.Group>
           <ProForm.Group >
              <ProFormRadio.Group width="md"  rules={[{ required: !this.props.admin}]}   label="一般纳税人" name="isTaxpayer" allowClear={false}  options={[{label:'是',value:1}, {label:'否',value:0}]}  />
              <ProFormRadio.Group label="发票类型"  rules={[{ required: !this.props.admin}]}   width="md" name="invoice_type" allowClear={false} options={[{label:'专票',value:'1'}, {label:'普票',value:'2'}]}/>
            </ProForm.Group>
     
              <h4 style={{color:'#f10000'}}>注意：下单、付款、开票三个公司抬头必须一样</h4>
        
            <ProForm.Group >
              <ProFormText  name="bank" label="开户银行" rules={[{ required: !this.props.admin}]}  allowClear={false}  width="md"/>
              <ProFormText  name="bank_account" label="银行账号" rules={[{ required: !this.props.admin}]}  allowClear={false}  width="sm"/>
              <ProFormText  name="invoice_phone" label="开票电话" rules={[{ required: !this.props.admin}]}  allowClear={false}  width="sm"/>
              <ProFormText  name="invoice_address" label="开票地址" rules={[{ required: !this.props.admin}]} allowClear={false}   width={600}/>
            </ProForm.Group>
            <ProForm.Group >
              <ProFormText  name="recipient" label="收件人" rules={[{ required: !this.props.admin}]} allowClear={false}   width="sm"/>
              <ProFormText  name="recipient_phone" label="收件人电话" rules={[{ required: !this.props.admin}]} allowClear={false}   width="sm"/>
              <ProFormText  name="mail" label="收件人邮箱地址"  allowClear={false} width={600}/>
            </ProForm.Group>
            <ProForm.Group >
              <Form.Item
                  name="areas"
                  label="收件地区"
                  rules={[
                    {
                      required: !this.props.admin
                    },
                  ]} 
                  style={{width:'440px'}}
                >
                  <Cascader
                    options={this.state.areaThree}
                    placeholder="请选择"
                    onChange={this.onChange}
                />
              </Form.Item>
            </ProForm.Group>
            <ProFormText  name="send_address" label="寄票详细地址" rules={[{ required: !this.props.admin}]} width={600}/>
          </ProForm>
      </TabPane>
    </Tabs>
    <AddressDialog data={this.state.currentArea} modalVisible={this.state.addressModal}
      id={this.state.data?.dealer?.id}
     areaThree={this.state.areaThree}
     onCancel={(val)=>{this.setState({addressModal:val})}} onFinish={this.addressFinish} />
    </>
    );
  }
}

export default MyDealerInfo
